<template>
	<view class="content">
		<view :style="{'height':statusHeight+'px'}"></view>
		<view class="search-box">
			<u-icon name="arrow-left" color="#000000" size="32rpx" @click="goBack"></u-icon>
			<u-search placeholder="输入鉴定编号" v-model="keyword" shape="square" bgColor="#fff" borderColor="#1A1A1A"
				:showAction="false" @clear="clearKeyword" @change="changeSearch"></u-search>
			<view class="search_btn" @click="search(keyword)">搜索</view>
		</view>

		<view class="main" v-if="list.length>0">
			<view class="main_item" v-for="(item,index) in list" :key="index" @click="$fn.jumpPage(`/pages/home/pages/identDetail?param=${item.number}`)">
				<view class="left">
					<image class="header-img" :src="vuex_imgUrl +item.avatar" mode=""></image>
					<view class="info">
						<view class="name">{{item.nickname}}</view>
						<view class="number">鉴定编号：{{item.number}}</view>
						<view class="ocreateTime">{{item.ocreateTime}}</view>
					</view>
				</view>
				<view class="right">
					<!-- <image class="asTrue" src="/static/tabbar/asTrue.png" mode=""></image> -->
<!-- 					 <view v-if="item.authenticationResult === 0">鉴定为真</view>
					  <view v-else-if="item.authenticationResult === 1">鉴定为假</view>
					  <view v-else-if="item.authenticationResult === 2">无法判断</view>
					  <view v-else-if="item.authenticationResult === 3">待补图</view> -->
					  
					  <view class="status" v-if="item.authenticationResult==3">待补图</view>
					  <view class="status" v-else-if="item.authenticationResult==2">无法判断</view>
					  <image class="asTrue" v-else-if="item.authenticationResult==1" src="/static/tabbar/asTrue.png" mode=""></image>
					  <image class="asTrue" v-else-if="item.authenticationResult==0" src="/static/tabbar/asFalse.png" mode=""></image>
					
					  <view v-if="item.itemType === 1">球鞋鉴定</view>
					  <view v-else-if="item.itemType === 2">奢潮鉴定</view>
					  <view v-else></view> <!-- 这里可以放置默认内容或者留空 -->
				</view>
			</view>
		</view>


		<view class="history" v-else>
			<view class="title f28">
				搜索历史
				<image src="/static/common/history_delete.png" class="icon" @click="deleteSearchRecord()"></image>
			</view>
			<view class="list f24 col666">
				<view class="item" v-for="(v,i) in keywordArr" :key="i" @click="search(v)">{{ v }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				keywordArr: [],
				list: [],
				statusHeight:0
			}
		},
		onShow() {
			this.getSearchRecords();
		},
		onLoad() {
			this.getSearchRecords();
			this.getPhe()
		},
		methods: {
			
			// 获取手机导航栏高度
			getPhe() {
				// 状态栏高度
				let systemInfo = uni.getSystemInfoSync()
				this.statusHeight = systemInfo.safeArea.top
			},
			
			
			// 回退
			goBack() {
				uni.navigateBack()
			},

			// 搜索
			search() {
				if (!this.keyword) {
					return uni.showToast({
						icon: 'error',
						title: '请输入关键词'
					})
				}

				this.keywordArr.unshift(this.keyword)
				let records = this.getSearchRecords();
				records.unshift(this.keyword);
				wx.setStorage({
					key: 'search_records',
					data: records,
				});
				this.getOrderByNumber();
				// // 这里调搜索接口
				// this.list.push({
					
				// })
				// this.getOrderByNumber();
			},
			getOrderByNumber(){
				this.$api.getOrderByNumber({number:this.keyword}).then(res => {
					console.log(res, '订单')
					this.list.push(res.data)
				})
			},

			// 清除keyWords
			clearKeyword() {
				console.log('清除keyWords');
				this.getSearchRecords();
				this.list = []
			},
			// 清除keyWords
			changeSearch(){
				if (!this.keyword) {
					console.log('清除keyWords2');
					this.getSearchRecords();
					this.list = []
				}
			},

			saveSearchRecord(record) {
				let records = this.getSearchRecords();
				records.unshift(record);
				wx.setStorage({
					key: 'search_records',
					data: records,
				});
			},

			getSearchRecords() {
				try {
					const records = wx.getStorageSync('search_records') || [];
					// console.log(111, records)
					const uniqueSet = new Set(records);
					const uniqueArr = Array.from(uniqueSet);
					this.keywordArr = uniqueArr;
					return records;
				} catch (e) {
					// 处理错误情况
					return [];
				}
			},
			// 删除搜索记录
			deleteSearchRecord() {
				this.keywordArr = [];
				wx.setStorage({
					key: 'search_records',
					data: [],
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 20rpx 32rpx 80rpx;
	}

	.search-box {
		margin-bottom: 28rpx;
		display: flex;
		align-items: center;
		gap: 30rpx;
	}

	.search_btn {
		font-weight: bold;
		font-size: 32rpx;
		color: #1A1A1A;
	}

	.history {
		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #1A1A1A;
			margin-bottom: 16rpx;

			.icon {
				width: 26rpx;
				height: 28rpx;
			}
		}

		.list {
			display: flex;
			flex-wrap: wrap;
			margin-right: -16rpx;

			.item {
				min-width: 158rpx;
				padding: 0 10rpx;
				height: 56rpx;
				border-radius: 8rpx;
				background: #F7F7F7;
				margin-right: 16rpx;
				margin-bottom: 16rpx;
				text-align: center;
				line-height: 56rpx;
			}
		}
	}

	.main {
		.main_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #E6E6E6;
			padding: 28rpx 0;

			.left {
				display: flex;
				align-items: center;
				gap: 28rpx;

				.header-img {
					width: 128rpx;
					height: 128rpx;
				}

				.info {
					height: 128rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.name {
						font-weight: bold;
						font-size: 32rpx;
						color: #1A1A1A;
					}

					.number {
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
					}

				}
			}


			.right {
				height: 128rpx;
				font-size: 24rpx;
				color: #333333;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-end;

				.asTrue {
					width: 72rpx;
					height: 72rpx;
				}
				.status {
					font-size: 28rpx;
					color: #F53100;
				}
			}

		}
	}
</style>